<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件流</title>
    <link rel="stylesheet" href="style/index.css">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>

<body>
    <!-- 冒泡案例 -->
    <!-- 元素->body->document->window -->
    <!-- 三个父子关系的div,然后分别加了点击事件，
    当我们在div3里面点击的时候，会发现弹出了一次3，接着又弹出了2，最后又弹出了1，
    这说明点击的时候，不仅div3的事件被触发了，它的父级div2 与div1的点击事件也触发了，这种现象就叫做冒泡。 -->
    <h3>事件流</h3>
    <div id="div1">
        div1
        <div id="div2">
            div2
            <div id="div3">
                div3
            </div>
        </div>
    </div>
</body>
<script>
    /*取消事件冒泡有两种方式：1、e.stopPropagation();不支持ie   2、window.event.cancelBubble=true;ie特有*/

    /* 阻止事件冒泡的兼容写法*/
    function stopBubble(e) {
        e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true
    }
    /* 阻止事件捕获的兼容写法*/
    function preventDefault(e) {
        e.preventDefault ? e.preventDefault() : e.returnValue = false
    }
    /* 事件监听写法：冒泡（默认false），捕获（true）*/
    let div3 = document.getElementById("div3")
    let div2 = document.getElementById("div2")
    div3.addEventListener('click', function(e) {
        alert('div3');
    }, true);
    div2.addEventListener('click', function(e) {
        alert('div2');
    }, true);


    // 常规写法
    $("#div1").click(function(e) {
        alert(this.id);
    });
    $("#div2").click(function(e) {
        alert(this.id);
        // stopBubble(e)
    });
    $("#div3").click(function(e) {
        alert(this.id);
        // stopBubble(e)
    });
</script>

</html>